<template>
  <div class="h-left fx">
    <div class="logo">
      <router-link to="/">
        <img :src="require('../../assets/imgs/logo.svg')" alt="" />
      </router-link>
    </div>
    <Menu
      :menuList="menuList"
      :i="i"
      @changeActiveIndex="changeActiveIndex"
    ></Menu>
  </div>
</template>

<script>
import Menu from "@/components/common/Menu";
import { setSessionStorage, getSessionStorage } from "@/utils/utils";
export default {
  name: "HeaderRight",
  data() {
    return {
      menuList: ["首页", "沸点", "小册", "活动"],
      i: getSessionStorage("navActiveIndex") || 0,
    };
  },
  components: {
    Menu,
  },
  methods: {
    changeActiveIndex(i) {
      setSessionStorage("navActiveIndex", i);
      this.i = i;
    },
  },
};
</script>

<style lang="scss" scoped>
.h-left {
  width: 40rem;
  .logo {
    margin-right: 4rem;
  }
}
</style>